import styled from 'styled-components';
import { Button, Card } from 'antd';

export const StyledButton: typeof Button = styled(Button)`
  width: 60px !important;
  height: 60px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  .anticon {
    font-size: 32px !important;
  }
`;

export const StyledCommandBar = styled.div`
  &.command-wrapper {
    border: 1px solid #dddddd;
    background-color: #f6f6f6;
    border-radius: 5px;
    padding: 8px;
    color: rgba(0, 0, 0, 0.45);
    display: flex;
    .command {
      flex: 1;
    }
    .icon {
      width: 25px;
    }
  }
  &.command-success {
    border: 1px solid #95de64;
    background-color: #f6ffed;
  }
`;

export const StyledChatBoxBottomLayout = styled.div`
  min-height: 5vh;
  padding: 10px;
`;

export const StyledChatInputBoxLayout = styled(Card)`
  .ant-card-bordered {
    border: 1px solid #dddddd;
    border-radius: 5px;
  }
  .ant-card-body {
    padding: 10px;
  }
  .input-wrapper {
    position: relative;
  }
  .bottom-wrapper {
    position: relative;
    display: flex;
    justify-content: right;
  }
`;

export const StyledChatHumanBoxLayout = styled.div`
  width: 100%;
  display: flex;
  justify-content: flex-end;
  .content {
    background: #bae7ff;
    padding: 10px;
    border-radius: 5px;
    display: inline-block;
    flex-grow: inherit;
  }
`;

export const StyledChatRobotBoxLayout = styled.div`
  width: 100%;
  > .ant-card {
    padding: 10px;
    border-radius: 5px;
    .ant-card-body {
      padding: 0px;
    }
  }
  > .footer {
    display: flex;
    justify-content: end;
    padding: 4px 0px;

    .ant-space {
      border-radius: 20px;
      padding: 5px 10px;
      background: white;
      .ant-divider-vertical {
        margin: 0px;
      }
      .ant-btn {
        border: none;
        &:hover {
          border: 1px solid #dddddd;
        }
      }
    }
  }
  // &.ant-card {
  //   width: 100%;
  //   border-radius: 5px;
  //   box-shadow: 0px 4px 10px -2px #ccc;
  //   .ant-card-body {
  //     // padding: 10px 10px 5px 10px;
  //     padding: 10px;
  //     .content-wrapper {
  //       // border: 1px solid #dddddd;
  //       // background-color: #f6f6f6;
  //       // border-radius: 5px;
  //       // padding: 8px;
  //       // color: rgba(0, 0, 0, 0.45);
  //       display: flex;
  //     }
  //     .footer {
  //       display: flex;
  //       justify-content: flex-end;
  //       padding: 10px 0 0 !important;
  //     }
  //   }
  // }
`;

export const StyledChatLoadingBoxLayout = styled(Card)`
  &.ant-card {
    width: 100%;
    .ant-card-body {
      padding: 10px;
    }
  }
`;
